<template>
	<view class="bg-black">
		<view class="cu-custom" :style="[{height:navBgImageHeight + 'px'}]">
			<image class="header-bg" :src="navBgImage">
			</image>
			<view class="cu-bar fixed" :style="'height:'+navHeight+'px;padding-top:'+statusHeight+'px;'">
				<view @tap="backAction" class="padding-left flex align-center justify-start">
					<text class="cuIcon cuIcon-back text-white"></text>
					<text class="text-white text-lg">{{isFromOutside?'首页':'返回'}}</text>
				</view>
				<view class="flex justify-center align-center" style="width: 50%;">
					<view class="text-lg text-bold">财富排行榜</view>
				</view>
			</view>
			<view :class="'cu-bar fixed '+themeColor"
				:style="'width:100%;height:'+navHeight+'px;padding-top:'+statusHeight+'px;opacity:'+navOpacity+';'">
				<view class="cu-bar fixed" :style="'height:'+navHeight+'px;padding-top:'+statusHeight+'px;'">
					<view @tap="backAction" class="padding-left flex align-center justify-start">
						<text class="cuIcon cuIcon-back text-white"></text>
						<text class="text-white text-lg">{{isFromOutside?'首页':'返回'}}</text>
					</view>
					<view class="flex justify-center align-center" style="width: 50%;">
						<view class="text-lg text-bold">财富排行榜</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length>0" class="flex justify-around align-center bg-black" style="width: 100%;">
			<view v-for="(item,index) in topUserList" :key="index">
				<view @tap="jumpToUserProfiel(item.user_id)" class="flex justify-center align-center padding"
					style="flex-direction: column;">
					<image v-if="index==1" :src="'../../../static/images/setting/score-'+index+'.png'"
						style="width: 150upx;height: 75upx;"></image>
					<image v-else :src="'../../../static/images/setting/score-'+index+'.png'"
						style="width: 130upx;height: 65upx;"></image>
					<image class="round" :src="item.avatar" style="width: 100upx;height: 100upx;"></image>
					<text class="text-df text-cut">{{item.nickname}}</text>
				</view>
			</view>
		</view>
		<view class="flex justify-between align-center padding-left padding-right padding-top-sm padding-bottom-sm"
			style="width: 100%;">
			<view class="flex justify-start align-center">
				<text class="text-df text-gray">排名</text>
				<view style="width: 60upx;"></view>
				<text class="text-df text-gray">畔友</text>
			</view>
			<view class="flex justify-end align-center">
				<text class="text-df text-gray">山竹</text>
			</view>
		</view>
		<mescroll-body class="bg-black" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
			:up="upOption">
			<view v-if="dataList.length>0" v-for="(item,index) in commonUserList" :key="index">
				<view @tap="jumpToUserProfiel(item.user_id)"
					class="flex justify-between align-center solid-bottom padding-left padding-right padding-top-sm padding-bottom-sm"
					style="width: 100%;">
					<view class="flex justify-start align-center">
						<text class="text-bold text-white">{{index+4}}</text>
						<view style="width: 60upx;"></view>
						<view class="flex justify-start align-center">
							<image :src="item.avatar" class="round" style="width: 60upx;height: 60upx;"></image>
							<view style="width: 4px;"></view>
							<text>{{item.nickname}}</text>
						</view>
					</view>
					<view class="flex justify-end align-center">
						<text class="text-bold text-white">{{item.score}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getUserListByScore
	} from '@/api/api.js'
	import config from '@/api/config.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				isFromOutside:false,
				dataList: [],
				upOption: {
					use:false,
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				themeColor: this.ThemeColor,
				windowWidth: 320,
				windowHeight: 568,
				userId: null,
				userInfo: null,
				top: 0, //标题图标距离顶部距离
				opacity: 0.5,
				scrollTop: 0.5
			}
		},
		onLoad(options) {
			if(options.outside!==null&&options.outside!==undefined) {
				this.isFromOutside = true
			}
			let _this = this
			uni.getSystemInfo({
				success(res) {
					console.log('window info:' + JSON.stringify(res))
					_this.windowWidth = res.windowWidth
					_this.windowHeight = res.windowHeight
					_this.StatusBar = res.statusBarHeight
					// #ifdef MP-QQ || MP-WEIXIN
					let custom = wx.getMenuButtonBoundingClientRect();
					_this.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
					// #endif
					// #ifdef MP-BAIDU
					let custom = swan.getMenuButtonBoundingClientRect();
					_this.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
					// #endif
				}
			})
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		computed: {
			topUserList() {
				if (this.dataList.length == 0) {
					return []
				}
				return [this.dataList[1], this.dataList[0], this.dataList[2]]
			},
			commonUserList() {
				if (this.dataList.length == 0) {
					return []
				}
				return this.dataList.slice(3, this.dataList.length - 3)
			},
			fixNavTop() {
				console.log('navHeight:' + this.navHeight)
				return this.CustomBar
			},
			scoreName() {
				return config.scoreName
			},
			openPrivateMessage() {
				return config.privateMessageOpen == 1 ? true : false
			},
			navBgImage() {
				return 'https://static.lulingshuo.icodefuture.com/score.jpg'
			},
			navBgImageHeight() {
				return this.windowWidth * 0.8;
			},
			navHeight() {
				return this.CustomBar
			},
			statusHeight() {
				return this.StatusBar
			},
			navOpacity() {
				return this.scrollTop / (this.CustomBar + 140)
			},
			navBgFilter() {
				let scrollRate = Math.min(1, this.scrollTop / (this.CustomBar + 50))
				return (1 - scrollRate) * 2
			}
		},
		methods: {
			onShareAppMessage(res) {
				return {
					title: '快来看看TopicQ的财富天梯榜，看看你上榜了没有?',
					path: '/pages/lessuse/all-sort/all-sort?outside=1'
				}
			},
			onShareTimeline(res) {
				return {
					title: '快来看看TopicQ的财富天梯榜，看看你上榜了没有?',
					path: '/pages/lessuse/all-sort/all-sort?outside=1'
				}
			},
			jumpToUserProfiel(userId) 
			{
				uni.navigateTo({
					url:'/pages/profile/profile?userId='+userId
				})
			},
			backAction() {
				if(this.isFromOutside) {
					uni.reLaunch({
						url:'/pages/index/index'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				})
			},
			getDataList(pageIndex, pageSize) {
				getUserListByScore(pageIndex, pageSize).then(res => {
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList);
					}
					console.log('page length:' + pageList.length)
					let hasNext = pageList.length >= pageSize && pageIndex <= 4
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				this.getDataList(0, 10)
			}
		},
	}
</script>

<style scoped lang="scss">
	.header-bg {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>
